<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解析顺序与技巧</title>
  </head>
  <body>
    <!-- 
      Dom 结点  --  DOM结点不是单纯的指的是标签元素，这个很容易混淆
        浏览器的理解中 DOM结点共有12种结点  标签结点知识其中的一种而已
    -->

    <script src="./a.js" defer>
      // script标签加上了defer属性之后 就算写的比较前面也是能够获取到标签的内容
    </script>
    <script>
      // 浏览器中读取DOM节点都是属于同步任务  如果想要不该边结构的前提下在前面
      // 拿到后面的结点元素就可以使用 setTimeOUt方法封装成一个异步任务
      setTimeout(() => {
        let four = document.getElementById('app')
        console.log('four', four)
      })
    </script>
    <script>
      // 使用onload事件，也可以实现在代码前面操作Dom结点
      window.onload = function () {
        let third = document.getElementById('app')
        console.log('third', third)
      }
    </script>
    <script>
      // 这里的结果是null 浏览器同步执行到这一行的时候  app结点还没有被创建
      let jim = document.getElementById('app')
      console.log('1', jim)
    </script>
    <div id="app">Jimmy</div>
    <script>
      // 可以拿到 因为同步执行到这一行的额时候dom结点已经被创建了
      let non = document.getElementById('app')
      console.log('2', non)
    </script>
  </body>
</html>
